<template>
  <div class="resource-edit">
    <Form
      :model="sourceForm"
      ref="serviceForm"
      class="ivu-form-no-margin-bottom"
      :rules="rule"
      :label-width="95"
    >
      <Row :gutter="32" class="code-row-bg">
        <Col :span="8">
          <Form-item prop="code" :label="$t('module.serverApi.serverClassification')">
            <Select
              
              :placeholder="$t('module.serverApi.serverClassificationSelect')"
              v-model="sourceForm.serverClassification"
              style="width: 100%"
            >
              <Option
                v-for="(item, index) in serverClassificationList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></Option>
            </Select>
          </Form-item>
        </Col>
        <Col :span="8">
          <Form-item prop="code" :label="$t('module.serverApi.resourceName')">
            <Select
              
              v-model="sourceForm.sourceName"
              :remote-method="getSourceName"
              filterable
              :loading="sourceNameLoading"
            >
              <Option
                v-for="(item, index) in sourceNameList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></Option>
            </Select>
          </Form-item>
        </Col>
        <Col :span="8">
          <Form-item prop="publishAddress" :label="$t('module.serverApi.publishAddress')">
            <Input
              :placeholder="$t('module.serverApi.publishAddressInput')"
              v-model.trim="sourceForm.publishAddress"
              
              :maxlength="50"
              style="width: 100%"
            />
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        <Col :span="8" style="border: none">
          <Form-item prop="serverApi" :label="$t('module.serverApi.serverApi')">
            <Select
              
              :placeholder="$t('module.serverApi.serverApiSelect')"
              v-model="sourceForm.serverClassification"
              style="width: 100%"
            >
              <Option
                v-for="(item, index) in serverClassificationList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></Option>
            </Select>
          </Form-item>
        </Col>
        <Col :span="8">
          <Form-item prop="apiAddress" :label="$t('module.serverApi.apiAddress')">
            <Input
              v-model.trim="sourceForm.apiAddress"
              
              :maxlength="50"
              style="width: 100%"
              :placeholder="$t('module.serverApi.apiAddressInput')"
            />
          </Form-item>
        </Col>
        <Col :span="8">
          <Form-item prop="apiAddress" :label="$t('module.serverApi.serverProvider')">
            <Input
              v-model.trim="sourceForm.serverProvider"
              
              :maxlength="50"
              style="width: 100%"
              :placeholder="$t('module.serverApi.serverProviderInput')"
            />
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import locales from "../serverApi/locales";

export default {
  name: "resouceEdit",
  mixins: [locales],
  props: {
    serverClassificationList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      sourceNameLoading: false,
      sourceNameList: [],
      actions: [
        {
          text: this.$t("common.save"),
          theme: "warning",
          icon: "edit",
          handle: () => {
            this.save();
          },
          loading: false
        },
        {
          text: this.$t("common.close"),
          theme: "primary",
          handle: () => {
            this.$emit("Close");
          }
        }
      ],
      sourceForm: {
        serverClassification: "",
        sourceName: "",
        publishAddress: "",
        serverApi: "",
        apiAddress: "",
        serverProvider: ""
      }
    }
  },
  created() {
    if (this.rowList && this.rowList.id) {
      this.$emit("SetTitle", this.$t("module.serverApi.editResource"));
    } else {
      this.$emit("SetTitle", this.$t("module.serverApi.createResource"));
    }
    this.$emit("SetPageWidth", 1000);
    this.$emit("SetPageActions", this.actions);
  },
  methods: {
    getSourceName() {

    },
    save() {

    }
  }
};
</script>

<style scoped>

</style>